<!-- User List -->
<template>
  <div class="content has_breadcrumb">
    <base-breadcrumb
      :data="[
        {
          routeName: 'users',
          name: 'Users',
        },
        {
          name: 'Ada Yeo',
        },
      ]"
      slot="breadcrumb"
    />
    <GgPage pageType="2" title="Users">
      <template v-slot:left>
        <gg-flex-menus
          :menus="menuDatas"
          @select="menuSelect"
          :default-active="activeIndex"
        />
      </template>
      <GgPageHeader :userInfo="userInfo" title="Ada Yeo" class="mar-b-0">
        <i slot="title-btn" class="title-icon iconfont iconedit"></i>
        <div slot="info">
          <div class="title-status">Active</div>
          <div class="account-info">
            <div class="account-create">Created : 23/02/2020</div>
            <div class="account-sign">Last sign in : 13/07/2020, 3:25 PM</div>
          </div>
          <div class="account-editbtn">
            <div class="editbtn-wrapper mar-r-20">
              <span class="iconfont iconlock-reset2 icon"></span>
              <span class="editbtn-text">Reset Password</span>
            </div>
            <div class="editbtn-wrapper">
              <span class="iconfont iconaccount-minus icon"></span>
              <span class="editbtn-text">Delete user</span>
            </div>
          </div>
        </div>
      </GgPageHeader>
      <div class="menu_list">
        <h5 class="title">
          <span>Apps</span>
          <span>Status</span>
        </h5>
        <ul>
          <li>
            <div class="access-box access-icon">
              <div class="icon-box">
                <img src="@/assets/images/settings/Locations.svg" alt="" />
              </div>
              <div>Companies</div>
            </div>
            <div class="access-box access-wrapper">On</div>
          </li>
          <li>
            <div class="access-box access-icon">
              <div class="icon-box">
                <img src="@/assets/images/settings/parents.svg" alt="" />
              </div>
              <div>Parents</div>
            </div>
            <div class="access-box access-wrapper">On</div>
          </li>
        </ul>
      </div>
    </GgPage>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      menuDatas: [
        {
          name: "Personal info",
          key: "personalInfo",
          active: true,
          children: [],
        },
        {
          name: "App access",
          key: "appAccess",
        },
      ],
      activeIndex: "appAccess",
      userInfo: {
        avatar: require("@/assets/logo.png"),
        firstName: "Dierdre",
        lastName: "Hu",
        email: "Dierdre.hu@edoovo.com",
      },
    };
  },
  methods: {
    menuSelect(key, item) {
      this.activeIndex = key;
      this.$router.push({ name: item.key });
    },
  },
  created() {},
};
</script>
<style lang='less'>
//@import url(); 引入公共css类
.menu_list {
  overflow: auto;
  position: relative;
  max-height: unset;
  .title {
    padding: 20px;
    color: rgba(32, 33, 36, 0.5);
    background: #f2f2f2;
    font-size: 12px;
    font-family: Roboto-Medium;
    font-weight: 400;
    overflow: hidden;
    span {
      float: left;
      padding: 0 16px;
      &:first-child {
        width: 240px;
      }
    }
  }
  ul li {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 48px;
    border-bottom: 1px solid #e0e0e0;
    font-family: Roboto;
    color: rgba(32, 33, 36, 0.5);
    font-size: 13px;
    .access-box {
      display: flex;
      padding: 0 16px;
    }
    .access-icon {
      width: 240px;
      .icon-box {
        width: 24px;
        margin-right: 16px;
        img {
          max-height: 24px;
          max-width: 24px;
        }
      }
    }
  }
}
</style>